<template>
  <div>
    <!-- 顶部筛选条件-->
    <el-form :model="filterData" label-width="0" size="mini">
      <el-row :gutter="10">
        <el-col style="width: 240px;">
          <el-form-item label="">
            <el-date-picker type="daterange" v-model="filterData.daterange" start-placeholder="起始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" range-separator="至" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col style="width: 180px">
          <el-form-item>
          <el-select v-model="filterData.platform" placeholder="上架渠道" clearable>
            <el-option label="京东自营" value="京东自营"></el-option>
            <el-option label="京东慧采" value="京东慧采"></el-option>
            <el-option label="政采云" value="政采云"></el-option>
            <el-option label="军网" value="军网"></el-option>
           </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width: 200px">
          <el-form-item>
            <el-input v-model="filterData.sn" placeholder="商品编码" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 200px">
          <el-form-item>
            <el-input v-model="filterData.title" placeholder="产品名称" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 180px">
          <el-form-item >
            <el-input v-model="filterData.client" placeholder="客户名" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 180px">
          <el-form-item >
            <el-input v-model="filterData.memo" placeholder="备注信息" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 100px">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div style="margin-bottom: 0px;">
      <el-form size="mini">
        <div style="display: flex;">
          <div style=" flex: 1;">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="PopupAddDialog">新增上架</el-button>
          </div>
          <div style="">
            <el-form-item label="" label-width="0">
              <el-radio-group v-model="filterData.status" @change="handleStatusChanged">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="已提交"></el-radio-button>
                <el-radio-button label="待上柜"></el-radio-button>
                <el-radio-button label="审核中"></el-radio-button>
                <el-radio-button label="上架完成"></el-radio-button>
                <el-radio-button label="已驳回"></el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>

        </div>
      </el-form>
    </div>
    <!--数据表格-->
    <div class="table-wraper">
      <el-table :data="tableData" border height="100%" @sort-change="sortByPrice"
        :header-cell-style="{'background-color': '#f5f7f9','color':'#666',border:'1px solid #f0f0f0'}"
        @selection-change="handleSelectionChange">
        <el-table-column prop="id" label="id" v-if="false"></el-table-column>
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column type="selection" label="序号" width="60" align="center"></el-table-column>
        <el-table-column type="expand" label="详情">
          <template v-slot="scope">
            <div style="margin-left: 100px; font-size: 10px;">
              <el-form label-width="120px">
                <el-row>
                  <el-col :span="14">
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="申请时间:" class="item-content">{{scope.row.createtime}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="上架渠道:" class="item-content">{{scope.row.desplatform}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="客户联系人:" class="item-content">{{scope.row.client}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <el-form-item label="申请名称:" class="item-content">
                          {{scope.row.title==""?'无':scope.row.title}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="品牌:" class="item-content">{{scope.row.brand}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="规格型号:" class="item-content">{{scope.row.model}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="质保期:" class="item-content">{{scope.row.exptime}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <el-form-item label="详细参数:" class="item-content">{{scope.row.params}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                         <el-col :span="8">
                        <el-form-item label="计量单位:" class="item-content">{{scope.row.unit}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="需求量:" class="item-content">{{scope.row.num}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="单价:" class="item-content">{{scope.row.price}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="销售区域:" class="item-content">
                          {{scope.row.allregion==1? "全国":scope.row.region}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <el-form-item label="渠道链接:" class="item-content">{{scope.row.channelurl}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <el-form-item label="备注信息:" class="item-content">{{scope.row.memo}}
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="10">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="" label-width="0px">
                          <div>轮播图</div>
                          <viewer :images="scope.row.thumbs">
                            <img v-for="src in scope.row.thumbs" :src="src.url" :key="src.name" fit="fill"
                              style="width: 80px; height: 80px; padding:1px; background-color: #585858; margin: 2px;">
                          </viewer>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="" label-width="0px">
                          <div>资质文件</div>
                          <div v-for="item in scope.row.zizhi" style="float: left;">
                            <img v-viewer v-if="item.type=='image/jpeg'" :src="item.url" :key="item.name" fit="fill"
                              style="width: 80px; height: 80px; padding:1px; background-color: #585858; margin: 2px;" />
                            <img v-if="item.type=='application/pdf'" src="@/assets/images/icon_pdf.jpg"
                              style="width: 80px; height: 80px; padding:1px; background-color: #585858; margin: 2px;"
                              @click="handlePreviewPdf(item)" />
                          </div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="cover" label="图片" width="60" align="center">
          <template v-slot="scope" style="text-align: center;">
            <div style="width: 20px; height:20px; background-color: #EEEEEE; cursor: pointer;"
              @click="openlink(scope.index,scope.row)">
              <el-popover placement="right-end" trigger="hover">
                <div style="width: 180px; border: 1px solid #aaaaaa; border-radius: 10px; padding: 10px;">
                  <img :src="scope.row.cover" style="width: 100%;" fit="cover" />
                  <div style="background-color: rgba(0,0,0,0.5);color:#FFFFFF;padding: 10px;">
                    {{scope.row.title}}
                  </div>
                  <label></label>
                </div>
                <img slot="reference" :src="scope.row.cover" style="width: 100%;heigt:100%" />
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="70px" align="center" >
          <template v-slot="scope">
            <span v-if="scope.row.status==1">已提交</span>
            <span v-if="scope.row.status==2">审核中</span>
            <span v-if="scope.row.status==5" style="color: #ffaa00;">待上柜</span>
            <span v-if="scope.row.status==3" style="color: #67C23A;">上架完成</span>
            <span v-if="scope.row.status==4" style="color: #F56C6C;">
              <el-popover :content="scope.row.errmsg" placement="top">
                <div slot="reference">已驳回</div>
              </el-popover>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="申请时间" width="110px" align="center" sortable>
          <template v-slot="scope">
            {{scope.row.createtime.substring(0,scope.row.createtime.indexOf(' '))}}
          </template>
        </el-table-column>
        <el-table-column prop="sn" label="商品编号" width="120px" align="center">
          <template v-slot="scope">
            <span v-if="scope.row.sn">{{scope.row.sn}}</span><span v-if="scope.row.sn" style="margin-left: 5px;"><a
                :href="'https://item.jd.com/'+scope.row.sn+'.html'" target="_blank"><i
                  class="el-icon-link"></i></a></span>
            <span v-if="!scope.row.sn">无</span>
          </template>
        </el-table-column>
        <el-table-column prop="platform" label="上架渠道" width="120px" align="center">
          <template v-slot="scope">
            {{scope.row.platformid==-1? '':scope.row.platform}}
          </template>
        </el-table-column>
        <el-table-column prop="pretitle" label="申请名称" max-width="500px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="model" label="规格型号" width="80px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="price" label="单价" width="80px" align="center" sortable></el-table-column>
        <el-table-column prop="unit" label="单位" width="60px" align="center"></el-table-column>
        <el-table-column prop="num" label="j需求数量" width="80px" align="center"></el-table-column>
        <el-table-column prop="client" label="客户" width="80px" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="memo" label="备注" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="supname" label="申请供应商" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="" label="操作" align="center" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button-group >
              <el-button icon="el-icon-edit-outline" size="mini" circle title="编辑详情" @click="handleEdit(scope.$index,scope.row)">
              </el-button>
              <el-button icon="el-icon-s-promotion" size="mini" circle title="设置上架状态"
                @click="handleAsyncJDGoods(scope.$index,scope.row)"></el-button>
              <el-button type="danger" title="删除" circle icon="el-icon-delete"
                @click="handleDelete(scope.$index,scope.row)" size="mini"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="margin-top: 10px; text-align: right;">
      <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
        layout=" prev, pager,next,jumper,sizes,total" :page-sizes="[25, 50, 80]" :total="total" :page-size="pagesize"
        :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>


    <CreateUI v-if="createVisible" ref="createUI" @closeHandler="createCompleteCallback"></CreateUI>
    <EditUI v-if="editVisible" ref="editUI" @closeHandler="editCompleteCallback"></EditUI>
    <AttachViewer v-if="pdfVisible" ref="pdfUI"></AttachViewer>
    <StatusUI v-if="statusVisible" ref="statusUI" @closeHandler="statusCompleteCallback"></StatusUI>

  </div>
</template>

<script>
  import CreateUI from './create.vue';
  import EditUI from './Edit.vue';
  import AttachViewer from '@/components/attachviewer.vue';
  import StatusUI from './StatusUI.vue';

  import axios from 'axios';
  export default {
    components: {
      CreateUI,
      EditUI,
      AttachViewer,
      StatusUI
    },
    data() {
      return {
        //分页相关
        curpage: 1,
        pagesize: 25,
        total: 1,
        filterData: {
          title: '',
          supname: '',
          client: '',
          sort: '',
          sn: '',
          memo: '',
          status: '全部',
          platform: '',
        },
        suppliers:[],
        platforms: [],
        tableData: [],
        createVisible: false,
        editVisible: false,
        pdfVisible: false,
        statusVisible: false,
        viewVisible: false,
        exportData: [],
      }
    },
    mounted() {
      this.loadDataList();
      this.loadPlatforms();
      this.loadSuppliers();
    },
    methods: {
      loadSuppliers() {
        this.axios.post("api/admin/supplier/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.suppliers = res.data.list;
          }
        });
      },
      handleStatusChanged(val) {
        this.curpage = 1;
        this.loadDataList();
      },
      handleQuery() {
        this.curpage = 1;
        this.loadDataList();
      },
      handlePreviewPdf: function(data) {
        this.pdfVisible = true;
        this.$nextTick(() => {
          this.$refs.pdfUI.dialogVisible = true;
          this.$refs.pdfUI.initData(data);
        })
      },
      sortByPrice: function(column) {
        if (column.prop = "price") {
          if (column.order) {
            this.filterData.sort = column.order;
          } else {
            this.filterData.sort = "";
          }
        }
        this.loadDataList();
      },
      loadPlatforms: function() {
        this.axios.get("/api/admin/platform/list").then((res) => {
          if (res.status == 200 && res.data.code == 0) {
            this.platforms = res.data.platforms;
          }
        })
      },
      handleAsyncJDGoods: function(index, data) {
        this.statusVisible = true;
        this.$nextTick(() => {
          this.$refs.statusUI.dialogVisible = true;
          this.$refs.statusUI.init(index, data, this.platforms);
        })


      },
      openlink: function(index, row) {
        window.open("https://item.jd.com/" + row.sn + ".html");
      },
      loadDataList: function() {
        let params = {
          curpage: this.curpage,
          pagesize: this.pagesize,
          title: this.filterData.title,
          supname: this.filterData.supname,
          supinfo: this.filterData.supinfo,
          client: this.filterData.client,
          sn: this.filterData.sn,
          memo: this.filterData.memo,
          status: this.filterData.status == '全部' ? "" : (this.filterData.status == '已提交' ? 1 : (this
            .filterData.status == '审核中' ? 2 : (this.filterData.status == '上架完成' ? 3 :(this.filterData.status=="待上柜"? 5:4)))),
          sort: this.filterData.sort,
          platform: this.filterData.platform == "全部" ? "" : this.filterData.platform
        }
        this.axios.post("/api/admin/productnew/list", params).then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.curpage = res.data.curpage;
            this.pagesize = res.data.pagesize;
          }
        })
      },
      editCompleteCallback: function(index, thumbdata, zizhidata, data) {
        this.tableData[index].desplatform = data.desplatform;
        this.tableData[index].client = data.client;
        this.tableData[index].pretitle = data.pretitle;
        this.tableData[index].brand = data.brand;
        this.tableData[index].model = data.model;
        this.tableData[index].params = data.params;
        this.tableData[index].weight = data.weight;
        this.tableData[index].size = data.size;
        this.tableData[index].mmq = data.mmq;
        this.tableData[index].unit = data.unit;
        this.tableData[index].count = data.count;
        this.tableData[index].price = data.price;
        this.tableData[index].allregion = data.allregion;
        this.tableData[index].region = data.region;
        this.tableData[index].channelurl = data.channelurl;
        this.tableData[index].memo = data.memo;
        this.tableData[index].thumbs = thumbdata;
        this.tableData[index].zizhi = zizhidata;
        this.tableData[index].status = data.status;
        this.tableData[index].supid = data.supid;
        this.tableData[index].supname = data.supname;
        this.tableData[index].supinfo = data.supinfo;
        this.tableData[index].platform = data.platform;
        this.tableData[index].platformid = data.platformid;
      },
      createCompleteCallback: function(index, data) {
        this.loadDataList();
      },
      statusCompleteCallback: function(index, data) {
        this.tableData[index].status = data.status;
        this.tableData[index].platform = data.platform;
        this.tableData[index].platformid = data.platformid;
        this.tableData[index].sn = data.sn;
      },
      PopupAddDialog: function() {
        this.createVisible = true;
        this.$nextTick(() => {
          this.$refs.createUI.dialogVisible = true;
          this.$refs.createUI.init();
        })
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      handleDelete: function(index, row) {
        let confirmText = ["正在删除上架记录，请仔细核对订单:", "商品名称: " + row.pretitle, "规格型号:" + row.model, "申请供应商: " + row
          .supname
        ];
        const newDatas = [];
        const h = this.$createElement;
        for (const i in confirmText) {
          newDatas.push(h('p', null, confirmText[i]));
        }
        this.$confirm("提示", {
          message: h('div', null, newDatas),
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          type: 'error'
        }).then(() => {
          this.axios.post("/api/admin/productnew/remove", {
            id: row.id
          }).then(res => {
            if (res.status == 200 && res.data.code == 0) {
              this.$message.success(res.data.msg, "提示");
              this.tableData.splice(index, 1);
            } else {
              this.$alert(res.data.msg, "提示", {
                type: "error"
              });
            }
          })
        }).catch(() => {})
      },
      handleEdit: function(index, row) {
        this.editVisible = true;
        this.$nextTick(() => {
          this.$refs.editUI.dialogVisible = true;
          this.$refs.editUI.initData(index, row);
        })
      },
      handleSelectionChange(val) {
        this.exportData = val;
      },
      handleExport: function(cmd) {
        let ids = [];
        this.exportData.map((item) => {
          ids.push(item.id);
        });
        window.open(axios.default.baseURL + "/common/export2excel/export?type=" + cmd + "&id=" + ids.join(","));
      }
    }
  }
</script>

<style scoped>
  .el-form-item--small.el-form-item {
    margin-bottom: 0px;
  }

  .item-content {
    color: #a3a3a3;
  }

  .table-wraper {
    height: calc(100vh - 280px);
  }
</style>
